<template>
  <view class="mybox">
    <view class="header">
      <!-- 展示用户信息 -->
      <view class="infobox txbox">
        <view class="infobox-l">
          <van-image
            round
            width="130rpx"
            height="130rpx"
            :src="userData.avatar"
          />
        </view>
        <view class="infobox-r">
          <view style="font-size: 32rpx">{{ userData.nickname }}</view>
          <view class="hswz" style="margin: 10rpx 0"
            >我的ID:{{ userData.id }}</view
          >
          <view class="hswz txbox">
            <view class="txbox" style="margin-right: 20rpx">
              <u-image
                width="25rpx"
                height="22rpx"
                :src="tjtb"
                style="margin-right: 10rpx"
              ></u-image>
              推荐人：{{ inviteData.nickname }}
            </view>
            <view> 推荐人ID:{{ inviteData.id }} </view>
          </view>
        </view>
      </view>
    </view>
    <view class="content">
      <!-- 展示订单 -->
      <view class="content-t" @click="handleGoOrder">
        <view class="bjbox txbox2">
          <view style="font-size: 30rpx">我的订单</view>
          <view>
            查看全部
            <u-icon name="arrow-right" color="#fff" size="28"></u-icon>
          </view>
        </view>
        <view class="ztGroup">
          <view v-for="item in ztList" class="ztbox">
            <view class="tpbox">
              <van-image width="60rpx" height="60rpx" :src="item.tp" />
            </view>
            <view>
              {{ item.mc }}
            </view>
            <view class="szbox">
              <u-badge size="mini" type="error" :count="item.sl"></u-badge>
            </view>
          </view>
        </view>
      </view>
      <!-- 地址和收藏列表 -->
      <view class="content-b">
        <view class="hxbox txbox2" @click="handleGoAddress">
          <view class="txbox">
            <u-image
              width="50rpx"
              height="50rpx"
              :src="dztb"
              style="margin-right: 10rpx"
            ></u-image>
            <text>收货地址</text>
          </view>
          <view
            ><u-icon name="arrow-right" color="#999" size="30"></u-icon
          ></view>
        </view>
        <!-- <view class="hxbox txbox2">
          <view class="txbox">
            <u-image
              width="60rpx"
              height="60rpx"
              :src="sctb"
              style="margin-right: 10rpx"
            ></u-image>
            <text>收藏列表</text>
          </view>
          <view
            ><u-icon name="arrow-right" color="#999" size="30"></u-icon
          ></view>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
//store
import { useUserStore } from '@/store'
// 工具
import { getImgFullPath } from '@/utils/index'
//api
import { baseApi, userApi, enumAll, orderApi } from '@/api'
import tjtb from '../../static/tjtb.png'
import fktb from '../../static/fktb.png'
import fhtb from '../../static/fhtb.png'
import shtb from '../../static/shtb.png'
import tktb from '../../static/tktb.png'
import dztb from '../../static/dztb.png'
import sctb from '../../static/sctb.png'

// 初始数据
const userStore = useUserStore()
const userData = computed(() => userStore.userInfo)
const inviteData = ref({ nickname: '', id: '' })
const shopMode = ref()
const ztList = ref([
  {
    mc: '待付款',
    tp: fktb,
    sl: 1
  },
  {
    mc: '待发货',
    tp: fhtb,
    sl: 1
  },
  {
    mc: '待收货',
    tp: shtb,
    sl: 1
  },
  {
    mc: '退款/售后',
    tp: tktb,
    sl: 1
  }
])
const handleGoOrder = () => {
  uni.navigateTo({ url: `/packageG/pages/supplyChainOrder/orderList` })
}
const handleGoAddress = () => {
  uni.navigateTo({
    url: '/packageB/pages/addressList/index?type=setAddress&isGYL=5'
  })
}
// 推荐人信息
const getUserByInviteCode = async () => {
  const { data } = await userApi.getUserByInviteCode({
    integralsRuleId: 4
  })
  inviteData.value = { ...data }
}

onLoad((options: any) => {
  console.log('供应链用户信息', options)
  if (options?.mode) {
    shopMode.value = options?.mode
    getUserByInviteCode()
  } else {
    uni.showToast({
      title: '请推出当前页面,重新进入选择模式',
      icon: 'none'
    })
  }
})
</script>

<style scoped lang="scss">
.mybox {
  font-size: 24rpx;
  position: relative;
  .header {
    position: absolute;
    width: 750rpx;
    height: 400rpx;
    background-image: url('../../static/wdbj.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    .infobox {
      padding: 20rpx;
      display: flex;
      .infobox-l {
        margin-right: 20rpx;
      }
      .infobox-r {
        font-size: 26rpx;
      }
    }
  }
  .content {
    position: absolute;
    top: 180rpx;
    // right: 50%;
    left: 50%;
    transform: translateX(-50%);
    .content-t {
      .bjbox {
        width: 670rpx;
        height: 100rpx;
        background-color: #ff6c18;
        color: white;
        padding: 20rpx;
        padding-bottom: 40rpx;
        border-radius: 10rpx;
      }
      .ztGroup {
        margin-top: -15rpx;
        padding: 20rpx 40rpx;
        width: 670rpx;
        border-radius: 10rpx;
        background-color: #fff;
        height: 200rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 40rpx;
        .ztbox {
          position: relative;
          text-align: center;
          // background-color: pink;
          width: 120rpx;
          .szbox {
            position: absolute;
            top: -30rpx;
            right: -12rpx;
          }
        }
      }
    }
    .content-b {
      position: absolute;
      .hxbox {
        width: 670rpx;
        padding: 20rpx;
        height: 120rpx;
        background-color: #fff;
        border-radius: 10rpx;
        font-size: 30rpx;
        margin-bottom: 40rpx;
      }
    }
  }
}
.txbox {
  display: flex;
  align-items: center;
}
.txbox2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hswz {
  color: #999;
}
</style>
